﻿/// <reference path="jquery-ui-1.8.23.js" />
/// <reference path="jquery-1.8.1.js" />
//Create the panel plugin

$(document).ready(function () {
    global.currentPage = new demonPage();
    global.currentPage.InitialPage();
    global.initiallGlobal();
});


//Define current page object
function demonPage() {
    var self = this;

    //Inherit the CUIpage
    CUIPage.call(this);

    //initial event
    this.pageEvent["changeOption"]=function(e){
        var x = $("#"+global.panelId).submitValidate();
        if (x !== null) {
            var temp = {};
            $.each(x, function (key, value) {
                if(value != ""){
                    switch(key){
                        case "txtPanelTitle":
                            temp.title = value;
                            break;
                        case "txtPanelInfo":
                            temp.tipInfo = value;
                            break;
                        case "ddlPanelTheme":
                            temp.theme = value;
                            break;
                        case "ddlPanelLogo":
                            temp.img = value;
                            break;
                    }
                }
            });
        }
       if( $("#"+global.panelId).attr("targetID"))
       { 
            temp.id= $("#"+global.panelId).attr("targetID");
            global.panel.panel("option","data", temp);
       }
       else{
            temp.id=(new Date()*1).toString();
            global.panel.panel("option","data", temp);
       }
    };
    
};
demonPage.prototype = new CUIPage();

var global =
{
    localization :null,
    sidebarRight: null,
    sidebarTop: null,
    pageInfo: null,
    customInfo: null,
    config: null,
    setting:null,
    panel:null,
    panelId: "panelSettingDialog",
    panelSettingManager:{
        setting:{},
        panelLogo:{
            "default.png":"Default",
            "icon-add-light.png":"Add",
            "icon-attached.png":"Attached",
            "icon-calculator.png":"Calculator",
            "icon-cancel-light":"Cancel",
            "icon-cloud.png":"Cloud",
            "icon-date.png":"Date",
            "icon-email.png":"Email",
            "icon-file.png":"File",
            "icon-attached.png":"Attached",
            "icon-msn.png":"MSN",
            "icon-net.png":"Net",
            "icon-ttplayer.png":"Music",
            "icon-unknow.png":"Unknow",
            "icon-wifi.png":"Wifi",
            "icon-time.png":"Time",
            "icon-recycle.png":"Recycle",
            "icon-history-light.png":"History",
            "icon-favorite.png":"Favorite",
            "icon-info.png":"Info",
            "icon-search-light.png":"Search",
            "icon-security.png":"Security",
            "icon-skull.png":"Skull"
        },
        panelTheme:{
            "icon-account.png":"Account",
            "red":"Red",
            "azure":"Azure",
            "rose":"Rose",
            "leaf":"Leaf",
            "blue":"Blue",
            "gold":"Gold",
            "purple":"Purple",
            "green":"Green",
            "yellow":"Yellow",
            "noble":"Noble",
            "magenta":"Magenta",
            "pink":"Pink",
            "technology":"Technology",
            "cyanogen":"Cyanogen",
            "gray":"Gray"
        },
        refesh: function(id){
            global.panelSettingManager.setting.title= $("#inputpaneltitle").cTextbox({
                attribute: {
                    id: "txtPanelTitle",
                    required: true,
                    tip: "Please input panel title in here",
                    minlength: 5
                }
            }); 
            global.panelSettingManager.setting.info= $("#inputpanelinfo").cTextbox({
                attribute: {
                    id: "txtPanelInfo",
                    required: true,
                    tip: "Please input panel title in here",
                    minlength: 5
                }
            }); 
            global.panelSettingManager.setting.theme= $("#inputPaneltheme").cDropdownList({
                tip: "Please select a theme.",
                data: global.panelSettingManager.panelTheme,
                attribute: {
                    id: "ddlPanelTheme",
                    required: true
                }
            });
            global.panelSettingManager.setting.logo= $("#inputPanellogo").cDropdownList({
                tip: "Please select a logo.",
                data: global.panelSettingManager.panelLogo,
                attribute: {
                    id: "ddlPanelLogo",
                    required: true
                }
            });
            global.panelSettingManager.setting.submit = $("#showCustomButton").cButton({
                attribute: {
                    id: "btnSubmit",
                    onItemClick: "changeOption"
                }
            });
        }
    },
    initiallGlobal: function () {
        
        global.panel = $("#container").panel(paneldata);
        $("#container").sortable({
            revert: true,
            handle: ".panel-title",
            greedy: true
        });

        $(".panel-list .panel").draggable({
            connectToSortable: "#container"
        });

        global.panels = $("#container .panel").droppable({
            activeClass: "opacity-5",
            hoverClass: "hoverpanel"
        });



        //slider of panel
        $(".panel-info").live("mouseenter", function () {
            $(this).find(".panel-tip").stop().animate({ left: '0px' }, 500);
        });
        $(".panel-info").live("mouseleave", function () {
            var width = $(this).find(".panel-tip").outerWidth() * -1;
            $(this).find(".panel-tip").stop().animate({ left: width }, 500);
        });

        //link event manage
        $("[option]").live("click", function () {
            switch ($(this).attr("option")) {
                case "panelSetting": 
                    $("#"+global.panelId).dialog({
                        modal:true,
                        width: "600px",
                        resizable: false,
                        title: "Panel Setting",
                        show: true,
                        hide: true,
                        draggable:false
                    });
                    $("#"+global.panelId).attr("targetID",$(this).closest(".panel").attr("id"));
                    break;
            }
        });

        global.pageInfo = {
            pageURL: null
        };

        global.customInfo = {
            right: null
        };

        //manage the setting panel
        global.panelSettingManager.refesh();
    }
};

//panelmanager
var panelmanager = {
    data: null,
    initialPanel: function () {

    },
    updatePanel: function () {

    }
}

var panelManager = function () {

    if (this.prototype.insertPanel != "function") {
        panelManager.pototype.insertPanel = function () {
        };
        panelManager.pototype.removePanel = function () {
        };
        panelManager.pototype.renderPanel = function (option) {
        };
    };
}





$.fn.container = function (options) {
    var self = $(this);
    self.html("xxxxx");
    return self;
};



jQuery.widget(
    "CUI.panel",{
        options:{
            data: [],
            itemDefaultOption:{
            col: 1,
            row: 1,
            theme: "default",
            title: "Panel title",
            img: webImage + "icon-history-light.png",
            imgTip: "The tip of image",
            tipInfo: "The tip of panel info",
            url: "#none",
            configable: true}
        },
        _create: function () {
            this._initialOptionByattr();
            this._refresh();
        },
        _refresh: function () {
            var self = this;
            $(self.options.data).each(function (index,item){
                item =$.extend({},self.options.itemDefaultOption, item);
               self._refreshByOption(item,self.element);
            });
        },
        _refreshByOption:function (option,list) {
            var self = list;
            var panel = $("#"+option.id);
                var contentString = ""
                if (option.configable) {
                    contentString += '<div class="panel-option"><a class="setting" option="panelSetting"><img src="content/images/icon-setting.png" /></a></div>';
                }
                contentString += String.stringFormat('<div class="panel-title"><a href="{0}">{1} </a></div><div class="panel-info"><img src="{2}" alt="{3}" titel="{3}" /><div class="panel-tip"><p>{4}</p></div></div>',
                    option.url,
                    option.title,
                    option.img,
                    option.imgTip,
                    option.tipInfo
                );
                if(panel.length == 0)
                {
                    contentString = String.stringFormat('<div class="panel" id="{0}">{1}</div>',option.id, contentString);
                    self.find(".start").after(contentString);
                }
                else{
                    panel.html("");
                    panel.append(contentString);
                }

                var panelClass = String.stringFormat("panel-{0}-{1} panel-theme-{2}",option.row,option.col,option.theme);
                $("#"+option.id).addClass(panelClass);
        },
        _findItemOptionById:function (id) {
            $(this.options.data).each(function(index, item){
                if(item.id === id ){
                    return item;
                }
            });
            return null;
        },
        _addItemOptionById: function (temp) {
            $(this.options.data).each(function(index, item){
                if(item.id === temp.id ){
                     item=temp;
                     return index;
                }
            });
            this.options.data.push(temp);
            return this.options.data.length-1;
        },
        _initialOptionByattr:function () {
            var self = this;
            self.element.find(".panel").each(function(index,item){
                self._addItemOptionById(self._initialItemOptionByattr(item));
            });
        },
        _initialItemOptionByattr: function (item) {
            var self = $(item);
            var option = {};
            if (self.is("[id]")) {
                option.id = self.attr("id");
            }
            if (self.is("[theme]")) {
                option.theme = self.attr("theme");
            }
            if (self.is("[col]")) {
                option.col = self.attr("col");
            }
            if (self.is("[row]")) {
                option.row = self.attr("row");
            }
            if (self.is("[title]")) {
                option.title = self.attr("title");
            }
            if (self.is("[img]")) {
                option.img = self.attr("img");
            }
            if (self.is("[imgTip]")) {
                option.imgTip = self.attr("imgTip");
            }

            if (self.is("[tipInfo]")) {
                option.tipInfo = self.attr("tipInfo");
            }
            if (self.is("[url]")) {
                option.url = self.attr("url");
            }
            if (self.is("[configable]")) {
                option.configable = self.attr("configable");
            }
            if(option.id && this._findItemOptionById(option.id)!==null)
            {
                option = $.extend({},option, this._findItemOptionById(option.id));
            }
            else{
                option = $.extend({}, this.options.itemDefaultOption, option);
            }
            if(!option.id){
                option.id=(new Date()*1).toString();
            }
            self.attr("id", option.id);
            return option;
        },
        _destroy: function() {
            var self = this;
            this.element.remove();
        },
        _setOptions: function() {
            var self = this;
            if(arguments.length>0){
                self._addItemOptionById(arguments);
                self._refresh();            
            }
        },
        reload: function (url, params) {
            if (url) {
                $.post(
                    url,
                    params,
                    function (html) {
                        this._refresh(html);
                    },
                    function (html) {
                        this._refresh(html);
                    }
                );
            }
        }
    }
);

var paneldata ={data: [
    {
        id:"default",
        url: "#none",
        theme: "default",
        img: webImage + "icon-ttplayer.png",
        imgTip: "CUI Controls",
        title: "default",
        tipInfo: "default"
    },
    {
        id:"red",
        col: 2,
        url: "#none",
        theme: "red",
        img: webImage + "icon-msn.png",
        imgTip: "red tips",
        title: "red",
        tipInfo: "red"
    },
    {
        id:"blue",
        url: "#none",
        theme: "blue",
        img: webImage + "icon-history-light.png",
        imgTip: "blue tips",
        title: "blue",
        tipInfo: "blue"
    },
    {
        id:"yellow",
        url: "#none",
        theme: "yellow",
        img: webImage + "icon-email.png",
        imgTip: "yellow tips",
        title: "yellow",
        tipInfo: "yellow"
    },
    {
        id:"purple",
        col: 2,
        url: "#none",
        theme: "purple",
        img: webImage + "icon-add-light.png",
        imgTip: "purple tips",
        title: "purple",
        tipInfo: "purple",
    },
    {
        id:"technology",
        url: "#none",
        theme: "technology",
        img: webImage + "icon-time.png",
        imgTip: "technology tips",
        title: "technology",
        tipInfo: "technology"
    },
    {
        id:"gold",
        url: "#none",
        theme: "gold",
        img: webImage + "icon-wifi.png",
        imgTip: "gold tips",
        title: "gold",
        tipInfo: "gold"
    },
    {
        id:"green",
        url: "#none",
        theme: "green",
        img: webImage + "icon-file.png",
        imgTip: "green tips",
        title: "green",
        tipInfo: "green"
    },
    {
        id:"azure",
        url: "#none",
        theme: "azure",
        img: webImage + "icon-net.png",
        imgTip: "azure tips",
        title: "azure",
        tipInfo: "azure"
    },
    {
        id:"noble",
        col: 2,
        url: "#none",
        theme: "noble",
        img: webImage + "icon-internet.png",
        imgTip: "noble tips",
        title: "noble",
        tipInfo: "noble"
    },
    {
        id: "rose",
        url: "#none",
        theme: "rose",
        img: webImage + "icon-unknow.png",
        imgTip: "rose tips",
        title: "rose",
        tipInfo: "rose"
    },
        {
        id: "leaf",
        col: 1,
        url: "#none",
        theme: "leaf",
        img: webImage + "icon-music.png",
        imgTip: "leaf tips",
        title: "leaf",
        tipInfo: "leaf"
    },
    {
        id: "cyanogen",
        col: 2,
        url: "#none",
        theme: "cyanogen",
        img: webImage + "icon-offset-light.png",
        imgTip: "cyanogen tips",
        title: "cyanogen",
        tipInfo: "cyanogen"
    },

    {
        id: "pink",
        url: "#none",
        theme: "pink",
        img: webImage + "icon-edit-dark.png",
        imgTip: "pink tips",
        title: "pink",
        tipInfo: "pink"
    },
    {
        id: "gray",
        url: "#none",
        theme: "gray",
        img: webImage + "icon-seachaccount-light.png",
        imgTip: "gray tips",
        title: "gray",
        tipInfo: "gray"
    },
    {
        id: "magenta",
        url: "#none",
        theme: "magenta",
        img: webImage + "icon-recycle.png",
        imgTip: "magenta tips",
        title: "magenta",
        tipInfo: "magenta"
    }
]};